<template>
  <div >
    <a-button v-for="item in menuList" block shape="round"
              class="menuSide"
              :class="mainModel === item.value ? 'activeMenu':'unActiveMenu'"
              @click="changeModel(item.value)">
      {{ item.name }}
    </a-button>
  </div>
</template>

<script setup>
import {computed, inject, ref, watch} from 'vue';

const treeHeight = computed(() => document.documentElement.clientHeight + "px")
const treeWidth = computed(() => document.documentElement.clientWidth + "px")

const tw = ref('100%');
const th = ref('100%');
const menuList = ref([
  {
    name: "财务报表更名",
    value: "updateName"
  },
  {
    name: "微信机器人",
    value: "chatSum"
  },
  {
    name: "商品价格计算",
    value: "sumOne"
  },
  {
    name: "参数设置",
    value: "setting"
  },

  {
    name: "测试用例",
    value: "api"
  },
  {
    name: "财务小帮手程序",
    value: "UpgradeBox"
  },
])


window.addEventListener('resize', () => {
  tw.value = '100%';
  th.value = '100%';
});
// 监听 treeHeight
watch(
    treeHeight,
    (newVal) => {
      th.value = '100%'
    },
    { immediate: true } // 立即执行一次监听器[2,6](@ref)
)

// 监听 treeWidth
watch(
    treeWidth,
    (newVal) => {
      tw.value = '100%'
    },
    { immediate: true } // 立即执行一次监听器[2,6](@ref)
)
const mainModel = inject('mainModel')

function changeModel(name) {
  mainModel.value = name
}

</script>

<style scoped>
.menuSide {
  margin-top: 10px;
}
.activeMenu {
  color: #FFFFFF;
  background-color: #328bdf;
}
.unActiveMenu {
  color: #328bdf;
  background-color: #FFFFFF;

}

</style>